<template>
  <div class="photo-list">
    <van-tabs animated>
    <van-tab v-for="item in cates" :key="item.id" >
      <template #title>
       <span @click="getimages(item.id)"> {{item.title}}</span>
      </template>
      <div class="img-box" v-if="images.length > 0">
        <img v-for="image in images" v-lazy="image.img_url" alt="" :key="image.id" @click="godetail('/home/photoinfo',image.id)">
      </div>
      <div v-else>暂无数据</div>
  </van-tab>
</van-tabs>
  </div>
</template>
<script>
export default {
  data () {
    return {
      cates:[],
      images:[]
    }
  },
  created () {
    this.getImgCateGory()
    this.getimages(0)
  },
  methods:{
    async getImgCateGory () {
      const res = await this.$http.getImgCateGory()
      // console.log(res.data.message)
      res.data.message.unshift({
        id:0,
        title:"全部"
      })
      this.cates = res.data.message
    },
    async getimages (id) {
      console.log(id)
      const res = await this.$http.getimages(id)
      this.images = res.data.message
      console.log(this.images)
    }
  }
}
</script>
<style lang="scss" scoped>
.photo-list{
  .img-box{
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
